<template>
  <uni-popup ref="popups" type="bottom">
    <view class="page">
      <view class="btnList flex justify-between">
        <view class="cancel" @click="cancel">取消</view>
        <view class="sure" @click="sure">确定</view>
      </view>
      <view class="pickerList">
        <picker
          mode="date"
          start="2000-01-01"
          end="2060-12-31"
          :value="startDate"
          @change="bindStartDateChange"
        >
          <view
            class="fs-38 mb-38 text-center"
            :class="mark === 1 ? 'op05' : ''"
            >{{ startDate }}</view
          >
        </picker>
        <!-- <text>至</text> -->
        <picker
          mode="date"
          start="2000-01-01"
          end="2060-12-31"
          :value="endDate"
          @change="bindEndDateChange"
        >
          <view class="fs-38 text-center" :class="mark === 2 ? 'op05' : ''">{{
            endDate
          }}</view>
        </picker>
      </view>
      <!-- <view>{{ year }}年{{ month }}月</view> -->
    </view>
  </uni-popup>
</template>

<script>
const date = new Date();
const years = [];
const months = [];
for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i);
}

for (let i = 1; i <= 12; i++) {
  months.push(i);
}
export default {
  props: {
    state: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      years,
      mark: 1,
      year: date.getFullYear(),
      months,
      month: 2,
      startDate: "2025-03-26",
      endDate: "2025-03-31",
      status: true, // 节流
      value: [9999, 1, 1],
    };
  },
  created() {
    // this.transferData();
  },
  methods: {
    // 限制选择超过结束日期
    validateFutureTime(date) {
      const now = new Date(date);
      const selected = new Date(this.endDate);
      let nowTime = now.getTime(); // 开始日期
      let selectedTime = selected.getTime(); // 结束日期
      let status = false;
      if (selectedTime < nowTime) {
        uni.showToast({ title: "开始日期不能超过结束日期", icon: "none" });
        status = true;
      }
      return status;
    },
    // 限制选择超过开始时间
    validatePastTime(date) {
      const now = new Date(date);
      const selected = new Date(this.startDate);
      let nowTime = now.getTime(); // 结束日期
      let selectedTime = selected.getTime(); // 开始日期
      let status = false;
      if (selectedTime > nowTime) {
        uni.showToast({ title: "结束日期不能早过开始日期", icon: "none" });
        status = true;
      }
      return status;
    },
    // 开始时间
    bindStartDateChange(e) {
      this.mark = 2;
      let str = this.validateFutureTime(e.detail.value);
      if (!str) {
        this.startDate = e.detail.value;
      }
    },
    // 结束时间
    bindEndDateChange(e) {
      this.mark = 1;
      let str = this.validatePastTime(e.detail.value);
      if (!str) {
        this.endDate = e.detail.value;
      }
    },
    // picker-view 值变化事件
    bindChange(e) {
      const val = e.detail.value;
      this.$set(this, "year", this.years[val[0]]);
      this.$set(this, "month", this.months[val[1]]);
    },
    showPopup() {
      // 打开提示
      this.$refs.popups.open();
    },
    // 时间格式化
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 传输初始数据
    transferData(value, data) {
      if (value) {
        // 初始化日期数据
        const today = new Date();
        // 月初（1号）
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        // 月末（下个月的第0天就是当前月的最后一天）
        const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        // 实名日期模块
        if (!this.state && data.startDate) {
          // 初始化状态开始时间
          this.startDate = data.startDate;
          // 初始化结束时间
          this.endDate = data.endDate;
        } else {
          // 抵扣卷日期模块
          // 初始化状态开始时间
          this.startDate = this.formatDate(firstDay);
          // 初始化结束时间
          this.endDate = this.formatDate(lastDay);
        }
      }
      let str = {
        startDate: this.startDate,
        endDate: this.endDate,
      };
      if (this.state) this.$emit("onDateChange", str);
    },
    sure() {
      // 确定
      setTimeout(() => {
        // let value = this.year + "年" + this.month + "月";
        this.transferData(false);
        this.cancel();
        this.$emit("initializedData", true);
        this.status = true;
      }, 300);
      this.status = false;
    },
    // 取消
    cancel() {
      this.$refs.popups.close();
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background: #fff;
  .btnList {
    padding: 40rpx 30rpx;
  }
  .pickerList {
    padding: 40rpx 100rpx 80rpx 100rpx;
  }
  .pickerView {
    background: #fff;
  }
}
.btnList,
.sure {
  font-size: 28rpx;
  color: #272727;
}
.op05 {
  opacity: 0.5;
}
</style>
